<template>
  <!-- 商品列表 -->
  <div class="things-lists">
    <div v-if="$route.path === '/things-lists'" class="things-lists-main">
      <div class="things-top">
        <el-input
          placeholder="请输入内容"
          v-model.lazy.trim="queryInput"
          class="input-with-select"
        >
          <el-button
            @click="queryClick()"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
        <el-button @click="addThings()" class="addThings" type="primary"
          >添加商品</el-button
        >
      </div>
      <!-- 表格 -->
      <div class="things-main">
        <el-table
          v-if="thingsLists"
          :stripe="true"
          :data="thingsLists.goods"
          border
          style="width: 100%"
        >
          <el-table-column align="center" type="index" label="编号" width="50">
          </el-table-column>
          <el-table-column prop="goods_name" label="商品名称">
          </el-table-column>
          <el-table-column prop="goods_price" label="商品价格(元)" width="150">
          </el-table-column>
          <el-table-column prop="goods_weight" label="商品重量" width="150">
          </el-table-column>
          <el-table-column prop="role_name" label="创建时间" width="200">
            <template v-slot="{ row }">
              {{ row.add_time | getTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template v-slot="{ row }">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑商品"
                placement="top-start"
              >
                <el-button
                  @click="editAThing(row)"
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                ></el-button>
              </el-tooltip>
              <el-button
                @click="deleteThing(row)"
                size="mini"
                icon="el-icon-delete"
                type="danger"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="users-buttom" v-if="thingsLists">
        <!-- v-if="queryList.length === userLists.users.length" -->
        <el-pagination
          @size-change="getThingsSize"
          @current-change="getThingsPage"
          :current-page="pagenum"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next"
          :total="thingsLists.total"
        >
        </el-pagination>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      queryInput: "",
      pagenum: 1,
      pagesize: 20,
      thingsLists: null,
    };
  },
  created() {
    this.getThings();
  },
  // computed: {
  //   ...mapState(["editThings"]),
  // },
  watch: {
    "$route.path"(newValue, oldValue) {
      if (oldValue === "/things-lists/addThings") {
        this.getThings();
        this.changeIs(false);
      }
    },
  },
  methods: {
    //获取初始数据
    async getThings() {
      const res = await this.$axios.get(
        `goods?pagenum=${this.pagenum}&&pagesize=${this.pagesize}&&query=${this.queryInput}`
      );
      this.thingsLists = res.data.data;
      // console.log(res);
    },
    getThingsSize(val) {
      this.pagesize = val;
      this.getThings();
    },
    //每页页码改变
    getThingsPage(val) {
      this.pagenum = val;
      this.getThings();
    },
    //搜索事件
    async queryClick() {
      if (this.queryInput !== "") {
        this.pagenum = 1;
        this.pagesize = 10;
      }
      this.getThings();
      // this.thingsLists = res.data.data;
    },

    //跳转添加商品页
    addThings() {
      this.$router.push("/things-lists/addThings");
    },
    //删除商品
    async deleteThing(row) {
      console.log(row);
      const index = this.thingsLists.goods.findIndex(
        (ele) => ele.goods_id === row.goods_id
      );

      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$axios.delete(`goods/${row.goods_id}`);
          this.thingsLists.goods.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑商品
    ...mapMutations(["changeIs"]),
    editAThing(row) {
      this.changeIs(row.goods_id);
      this.addThings();
    },
  },
};
</script>

<style  lang='less'>
.things-lists {
  padding: 15px;
  .things-top {
    width: 500px;
    display: flex;
    .addThings {
      margin-left: 15px;
    }
  }
  .things-main {
    margin-top: 15px;
  }
}
</style>